<template>
    <div class="app-container">
        <el-form  label-width="80px" :model="bed" :rules="rules" ref="bed">
  <el-form-item label="医院名称" prop="hosId" >
    <el-select  v-model="bed.hosId" @change="bedShow" placeholder="请通过鼠标选择医院名称">
      <el-option :label="hos.name" v-for="hos in hospitals" :key="hos.id" :value="hos.id" ></el-option>     
    </el-select>
  </el-form-item>
    <el-form-item label="医院科室" prop="htId">
    <el-select  v-model="bed.htId"  @change="methods2" placeholder="先选择医院，再选择科室">
      <el-option :label="hds.deptname" v-for="hds in hosDepts" :key="hds.id" :value="hds.id" ></el-option>
    </el-select>
  </el-form-item>
   <el-form-item label="床位编号" prop="bedCode">
    <el-input v-model="bed.bedCode"></el-input>
  </el-form-item>
   <el-form-item label="设备厂家名称" prop="manufacturerAddress">
    <el-input v-model="bed.manufacturerAddress"></el-input>
  </el-form-item>
   <el-form-item label="厂家联系人名称" prop="manufacturerLxr">
    <el-input v-model="bed.manufacturerLxr"></el-input>
  </el-form-item>
   <el-form-item label="厂家联系电话" prop="manufacturerPhone">
    <el-input v-model="bed.manufacturerPhone"></el-input>
  </el-form-item>
   <el-form-item label="设备型号" prop="unitType">
    <el-input v-model="bed.unitType"></el-input>
  </el-form-item>
  <el-form-item>
        <el-button type="primary" icon="el-icon-edit" @click="handleAdd('bed')"
          >保存</el-button>
          <el-button @click="resetForm('bed')">重置</el-button>
 
      </el-form-item>
</el-form>
    </div>
</template>

<script>
export default {
data(){
    return{
        hospitals:[],
        hosDepts:[],
         
        bed:{
        hosId:'',//医院id
        htId:'',//科室id
        hosName:'',
        hosTypeName:'',  
        bedCode:'',
        manufacturerLxr:'',
        manufacturerPhone:'',
        manufacturerAddress:'',
        unitType:'',
        addTime:new Date(),
        status:'0',
        remark:'无'
        },
        rules:{
          hosId:[
            {required: true, message: '请选择医院名称', trigger: 'change'}
          ],
          htId:[
            {required: true, message: '请选择科室名称', trigger: 'change'}
          ],
           bedCode: [
            { required: true, message: '床位编号不能为空', trigger: 'blur' },
          ],
           manufacturerAddress: [
            { required: true, message: '厂家名称不能为空', trigger: 'blur' },
           
          ],
           manufacturerLxr: [
            { required: true, message: '厂家联系人不能为空', trigger: 'blur' },
          ],
          manufacturerPhone: [
            { required: true, message: '厂家联系人电话不能为空', trigger: 'blur' },
            { min: 11, max: 11, message: '长度在 11 个字符', trigger: 'blur' }
          ],
          unitType: [
            { required: true, message: '设备型号不能为空', trigger: 'blur' },
          ],
        }
       
    }
},
mounted(){
  this.bedShow();
    
},
methods:{
    bedShow(val){
      
        this.$axios({
          methods:"GET",
          url:'http://localhost:8080/jiapei/bed/hosdept',
          params:{
              hosId:this.bed.hosId
          }
          }).then(res=>{
              this.hospitals=res.data.data.hospitals;
              this.hosDepts=res.data.data.hosDepts;
           
          })
        let obj = {};
  obj = this.hospitals.find((item)=>{
     return item.id === val;
  });
  this.bed.hosName = obj.name;
  console.log(this.bed.hosName)
       
    },
    handleAdd(bed){
       this.$refs[bed].validate((valid) => {
          if (valid) {
       this.$axios.post('http://localhost:8080/jiapei/bed/bed',this.bed).then(res=>{
           if(res.data.data.code==200){
            this.$message("保存成功");
            this.$router.push('/cus/bedlist');
           }
       })
       } else {
            console.log('error submit!!');
            return false;
          }
        });
    },
    methods2(val){
        let obj2 = {};
  obj2 = this.hosDepts.find((item)=>{
     return item.id === val;
  });
  this.bed.hosTypeName = obj2.deptname;
  console.log(this.bed.hosTypeName)
    },
     resetForm(bed) {
        this.$refs[bed].resetFields();
      }
}
}
</script>

<style>

</style>